<template>
    <el-sub-menu index="8"  class="tool-box-menu">
      <template #title>工具箱</template>
      <el-menu-item index="8-1" @click="handleChange('8-1')"
        >测量距离</el-menu-item
      >
      <el-menu-item index="8-2" @click="handleChange('8-2')"
        >测量面积</el-menu-item
      >
      <el-menu-item index="8-3" @click="handleChange('8-3')"
        >关闭测量</el-menu-item
      >
      <el-menu-item index="8-4" @click="handleChange('8-4')"
        >导出图片</el-menu-item
      >
    </el-sub-menu>
</template>

<script setup>
import { ref, onMounted, getCurrentInstance } from "vue";
import { createDraw } from "@/api/ol-api/createDraw";

const { proxy } = getCurrentInstance();
let map;
let popups = []; // 存储弹窗
let toolShow = ref(true);
let resultLength = ref("");
let resultArea = ref("");

onMounted(() => {
  map = proxy.$map;
  map.addLayer(draw_layer);
});

let draw_source = new ol.source.Vector({});
let draw_layer = new ol.layer.Vector({
  source: draw_source,
});

let draw_line = createDraw({
  type: "LineString", //需要什么画笔就使用什么画笔
  source: draw_source,
});

let draw_area = createDraw({
  type: "Polygon", //需要什么画笔就使用什么画笔
  source: draw_source,
});

// 绘制线段结束事件
draw_line.on("drawend", (event) => {
  const lineCoordinates = event.feature.getGeometry().getCoordinates();

  const length = turf.length(turf.lineString(lineCoordinates), {
    units: "meters",
  });

  // 设置内容
  const content =
    length > 1000
      ? ` ${(length / 1000).toFixed(2)}km`
      : ` ${length.toFixed(2)}m`;

  const lineLastPoint = lineCoordinates[lineCoordinates.length - 1];
  createDom(lineLastPoint, content);
});

// 绘制区域结束事件
draw_area.on("drawend", (event) => {
  // 获取面积坐标
  const areaCoordinates = event.feature.getGeometry().getCoordinates()[0];
  // 使用 Turf.js 计算面积
  const area = turf.area(turf.polygon([areaCoordinates]));

  // 设置内容
  const content =
    area > 1000000
      ? `${(area / 1000000).toFixed(2)}km²`
      : `${area.toFixed(2)}m²`;

  // 使用 Turf.js 计算区域中心
  const areaPolygon = turf.polygon([areaCoordinates]);
  const centroid = turf.centroid(areaPolygon);
  const centerCoordinates = centroid.geometry.coordinates; // 获取中心点坐标

  createDom(centerCoordinates, content);
});

const createDom = (popupPoint, content) => {
  // 创建新的弹窗元素
  const popupContainer = document.createElement("div");
  popupContainer.className = "ol-popup";

  // 创建弹窗内容
  const popupContent = document.createElement("div");

  popupContent.innerHTML = content;
  popupContainer.appendChild(popupContent);

  // 创建弹窗并设置位置
  const popup = new ol.Overlay({
    element: popupContainer,
    autoPan: true,
    positioning: "bottom-center",
    stopEvent: true,
    autoPanAnimation: {
      duration: 250,
    },
  });

  popup.setPosition(popupPoint);
  map.addOverlay(popup);
  popups.push(popup); // 存储弹窗引用
};
// 交互工具选择处理
const handleChange = (selectedValue) => {
  if (selectedValue === "8-1") {
    map.removeInteraction(draw_area); // 移除当前的交互
    map.addInteraction(draw_line);
    draw_source.clear(); // 清除绘制的要素
    toolShow.value = true; // 显示长度
    resultArea.value = ""; // 清空面积
    // 隐藏所有弹窗
    popups.forEach((popup) => {
      map.removeOverlay(popup);
    });
  } else if (selectedValue === "8-2") {
    map.removeInteraction(draw_line); // 移除当前的交互
    map.addInteraction(draw_area);
    draw_source.clear(); // 清除绘制的要素
    toolShow.value = false; // 显示面积
    resultLength.value = ""; // 清空长度
    // 隐藏所有弹窗
    popups.forEach((popup) => {
      map.removeOverlay(popup);
    });
  } else if (selectedValue === "8-3") {
    map.removeInteraction(draw_line);
    map.removeInteraction(draw_area);
    draw_source.clear(); // 清除绘制的要素
    // 隐藏所有弹窗
    popups.forEach((popup) => {
      map.removeOverlay(popup);
    });
    popups = [];
  } else if (selectedValue === "8-4") {
    map.once("postcompose", function (e) {
      const canvas = e.context.canvas;
      canvas.toBlob(function (blob) {
        saveAs(blob, "map.png");
      });
    });
    map.renderSync();
  }
};
</script>

<style>

.ol-popup {
  font-size: 12px;
  box-sizing: border-box;
  position: absolute;
  background-color: #0066c680;
  padding: 5px;
  border-radius: 10px;
  border: 2px solid #fff;
  bottom: 5px;
  left: 50%;
  transform: translateX(-50%);
  /* min-width: 80px; */
  z-index: 100;
}
</style>
